<template>
  <div class="tableForm">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      class="demo-ruleForm"
      status-icon
      :rules="rules"
    >
      <el-form-item>
        <el-radio-group
          v-model="ruleForm.type"
          class="custom-radio-group"
          @change="selectChange"
        >
          <el-radio
            :value="item.type"
            v-for="item in typeList"
            :key="item.type"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="Recharge" style="height: 180px">
        <el-table
          v-loading="loading"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="orderInfo" label="订单信息" />
          <el-table-column prop="pay" label="支付方式" />
          <el-table-column prop="money" label="开票金额" />
          <el-table-column prop="" label="开票主体" />
          <el-table-column prop="time" label="订单时间" />
        </el-table>
      </el-form-item>
      <!-- <el-empty v-else description="暂无数据" /> -->
      <el-form-item>抬头信息</el-form-item>
      <el-form-item prop="invoice">
        <el-table
          v-loading="loading"
          ref="tableDom"
          :data="taiTouTableData"
          @current-change="rowClick"
          highlight-current-row
          style="height: 110px"
        >
          <el-table-column width="60px" class="radio">
            <template #default="scope">
              <el-radio
                class="radio"
                v-model="ruleForm.id"
                :label="scope.row.id"
              ></el-radio>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="header" label="发票抬头" /> -->
          <el-table-column label="发票抬头">
            <template #default="scope">
              <span v-if="scope.row.info">
                {{ JSON.parse(scope.row.info).header ?? '-' }}</span
              >
            </template>
          </el-table-column>
          <!-- <el-table-column prop="duty" label="税号" /> -->
          <el-table-column label="税号">
            <template #default="scope">
              <span v-if="scope.row.info">
                {{ JSON.parse(scope.row.info).duty ?? '-' }}</span
              >
            </template>
          </el-table-column>
          <!-- <el-table-column prop="adress" label="注册地址" /> -->
          <el-table-column label="注册地址" width="300">
            <template #default="scope">
              <span v-if="scope.row.info">
                {{ JSON.parse(scope.row.info).adress ?? '-' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="营业电话" />
          <el-table-column label="开户行">
            <template #default="scope">
              <span v-if="scope.row.info">
                {{ JSON.parse(scope.row.info).bankName ?? '-' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="银行账号">
            <template #default="scope">
              <span v-if="scope.row.info">
                {{ JSON.parse(scope.row.info).bankRoot ?? '-' }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <p class="txt">
          已选择订单
          <span class="num">{{ length ?? 0 }}</span> 笔 金额共计
          <span class="money">￥{{ totalAmount }}</span>
        </p>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          申请发票
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import withdraw from '@/modules';
import { ElMessage } from 'element-plus';
const { receiptApi } = withdraw;
const tableDom = ref(null);
const emit = defineEmits(['selectChangeType']);
const prop = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  taiTouTableData: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const ruleFormRef = ref(null);
//记录选中订单
const length = ref(null);
//总价格
const totalAmount = ref('0.00');
const typeList = ref([
  {
    type: 1,
    name: '充值单',
  },
  // {
  //   type: 2,
  //   name: '签约单',
  // },
]);
const tableData = ref([]);
const taiTouTableData = ref([]);
const ruleForm = reactive({
  type: 1, //1 充值单 //2 开票记录
  page: 1,
  pageSize: 10,
  v_id: null,
  ids: '',
  Recharge: null,
  invoice: null,
});
const rules = reactive({
  Recharge: [
    {
      required: true,
      message: '请选择充值单',
      trigger: 'blur',
    },
  ],
  invoice: [
    {
      required: true,
      message: '请选择发票',
      trigger: 'blur',
    },
  ],
});

// 使用 watch 观察 tableData 的变化
watch(
  () => [prop.tableData, prop.taiTouTableData],
  ([newValue, newTai]) => {
    newValue ? (tableData.value = newValue) : [];
    newTai ? (taiTouTableData.value = newTai) : [];
  },
  { immediate: true }
); // 立即执行以查看初始数据

const selectChange = (val) => {
  emit('selectChangeType', val);
};
//勾选当前行
const handleSelectionChange = (val) => {
  ruleForm.Recharge = val;
  length.value = val.length;
  // 计算选中金额总和并保留两位小数
  const sum = val.reduce((acc, row) => {
    return acc + Number(row.money); // 确保把字符串转换为数字
  }, 0);
  totalAmount.value = sum.toFixed(2); // 使用 toFixed 保留两位小数
  // 提取选中行的id
  ruleForm.ids = val.map((val) => val.id);
};
// 第二个表格

// 处理选择变化
const rowClick = (selection) => {
  ruleForm.v_id = selection.id;
  ruleForm.invoice = selection.id;
};

//申请发票api
const receIptApiList = (params) => {
  receiptApi(params).then((res) => {
    ElMessage({
      message: res.msg,
      type: 'success',
    });
  });
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) return;
    const { ids, v_id } = ruleForm;
    receIptApiList({ ids, v_id });
  });
};
</script>
<style scoped lang="scss">
.tableForm {
  padding-top: 20px;
}
.txt {
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #86909c;
  line-height: 14px;
  margin: 24px 0;
  .num {
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 14px;
  }
  .money {
    color: red;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
<style lang="scss">
.radio .el-radio__label {
  display: none !important;
}
</style>
